<template>
	<view class="y">
		<!-- 轮播图 -->
		<swiper :autoplay="1">
			<view v-for="(item,index) in lunbo" :key="index">
				<swiper-item>
					<image :src="item"></image>
				</swiper-item>
			</view>
		</swiper>

		<!-- 详细信息 -->
		<view>
			<view class="mokuai1">
				<view class="qian">
					<span>￥ {{xiang.retailPrice}}</span>
					<span class="shan">￥ {{xiang.counterPrice}}</span>
				</view>
				<view class="qian">{{xiang.name}}</view>
				<view class="qian">{{xiang.brief}}</view>
			</view>

			<view class="mokuai2">
				<span>规格</span>
				<span>请选择</span>
				<image src="../../static/尖括号.png" class="aa" @click="open"></image>
				<!-- <uni-popup ref="popup" type="bottom"> -->
				<!-- <image :src="biaozhun.picUrl"></image> -->
				<!-- <span>{{biaozhun.name}}</span> -->
				<!-- </uni-popup> -->
				<button class="button" type="primary" @click="toggle('bottom')"><text
						class="button-text">底部</text></button>
			</view>
		</view>

		<!-- <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" /> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					icon: 'headphones',
					text: '客服',
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					}
				],
				lunbo: [],
				goodsId: 0,
				xiang: {},
				gui: {},
				biaozhun: {}

			}
		},
		onLoad(obj) {
			uni.request({
				url: 'http://47.91.230.137:8086/wx/goods/detail?id=' + obj.id,
				success: (res) => {
					//debugger
					// console.log(res)
					this.AAAid = res.data.data.info.id;
					this.lunbo = res.data.data.info.gallery;
					this.xiang = res.data.data.info;
					this.gui = res.data.data.productList;
					this.biaozhun = res.data.data.specificationList;
				}
			})
		},
		methods: {
			// onClick(e) {
			// 	uni.showToast({
			// 		title: `点击${e.content.text}`,
			// 		icon: 'none'
			// 	})
			// },
			buttonClick(e) {
				// console.log(e)
				this.options[1].info++
			},
			open() {
				this.$refs.popup.open('bottom')
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},

		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.aa {

		width: 50rpx;
		height: 50rpx;
	}

	.mokuai1 {
		height: 200rpx;
		margin-top: 20rpx;
	}

	.qian {
		padding-top: 15rpx;
		padding-left: 30rpx;
	}

	.shan {
		padding-left: 20rpx;
		font-size: 20rpx;
		color: #cacaca;
		text-decoration: line-through
	}

	.mokuai2 {
		display: flex;
		justify-content: space-between;
		margin-left: 30rpx;
	}
</style>